{% extends 'classroom/content-layout.html.twig' %}
{% set nav = 'certificates' %}
{% block description %}{{ classroomDescription|default('')|plain_text(100) }}{% endblock %}

{% block main %}

  <div class="es-piece">
    <div class="piece-header">{{ 'course.introduction.authentication_certificate'|trans }}</div>
    <div class="piece-body p-lg">
      <ul class="certificates-list">
        {% for certificate in certificates if certificates %}
          <li class="certificates-item clearfix">
            <div class="certificate-img">
              <span>{{ 'course.catalogue.certificate'|trans }}</span>
            </div>
            <div class="certificate-info pull-left">
              <div>
                <span class="certificate-name">{% if certificate.name|length > 34 %}{{ certificate.name|slice(0,34) ~ '...' }}{% else %}{{ certificate.name }}{% endif %}</span>
                {% if obtained[certificate.id]|default(false) %}
                  <div class="certificate-obtain-tag certificate-tag-have">{{ 'course.catalogue.certificate_have'|trans }}</div>
                {% else %}
                  <div class="certificate-obtain-tag certificate-tag-wait">{{ 'course.catalogue.certificate_wait'|trans }}</div>
                {% endif %}
              </div>
              <div>
                <span class="certificate-description">{{ 'classroom.certificate_obtain'|trans }}</span>
              </div>
            </div>
            <div class="certificate-view-btn pull-right">
              <a class="cd-btn cd-btn-primary" href="#" data-target="#modal" data-toggle="modal" data-url="{{ path('certificate_detail', {id:certificate.id }) }}">{{ 'course.catalogue.certificate_detail'|trans }}</a>
            </div>
          </li>
        {% endfor %}
      </ul>
    </div>
  </div>

{% endblock %}

